<template>
    <div class="my-list">
        <div class="head flex-between">
            <div class="item" :style="{width}" v-for="(item,index) in head" :key="index">{{ item.name }}</div>
        </div>
        <div class="content" ref="scrollContainer">
            <!-- 只显示原始数据 -->
            <div class="list flex-between" v-for="(item,index) in data" :key="index">
                <div class="item" :style="{width}" v-for="(item2,index) in head" :key="index">{{ item[item2.prop] }}{{ item2.unit || '' }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        head: {
            type: Array,
            default: () => [],
        },
        data: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        width(){
            return `${100 / this.head.length}%`
        }
    }
}
</script>

<style lang="less" scoped>
    .my-list{
        height: 100%;
        max-height: 100%;
        .item{
            color: #fff;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 8px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            
            /* 悬停时显示完整文字 */
            &:hover {
                white-space: normal;
                text-overflow: initial;
                overflow: visible;
                height: auto;
                min-height: 40px;
                background: rgba(0, 15, 46, 0.95);
                border: 1px solid rgba(31, 198, 255, 0.5);
                border-radius: 4px;
                z-index: 100;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                word-break: break-word;
                line-height: 1.4;
                padding: 8px;
            }
        }
        .head{
            margin-bottom: 8px;
            background: rgba(31, 198, 255, 0.2);
            .item{
                font-weight: 400;
                color: #B4C0CC;
            }
        }
        .content{
            height: calc(100% - 48px);
            max-height: calc(100% - 48px);
            overflow-y: auto;
            overflow-x: hidden;
            scroll-behavior: smooth;
            position: relative;
            
            /* 滚动条样式 */
            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 3px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: rgba(31, 198, 255, 0.6);
                border-radius: 3px;
                &:hover {
                    background-color: rgba(31, 198, 255, 0.8);
                }
            }
            
            .list{
                border-left: 2px solid transparent;
                &:hover{
                    background: rgba(31, 198, 255, 0.2);
                    border-left: 2px solid rgba(31, 198, 255, 1);
                    .item{
                        color: #1FC6FF;
                    }
                }
                .item{
                    font-weight: 500;
                }
            }
        }
    }
</style>